<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/main.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/font-awesome.min.css">
	
	<script src="/blog/echo/v1.0/Public/js/staticAction.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/vue.min.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/jquery.min.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/jquery-ui.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var sessionInfo = '<?php echo json_encode(session("uinfo")); ?>';
		sessionInfo = JSON.parse(sessionInfo);
		var staticRUL = "/blog/echo/v1.0/Public";
		var staticApi = "/blog/echo/v1.0/";
	</script>
</head>
<body>

<!-- 模态框（Modal） -->
<div class="modal" id="sign-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
       	<div class="sign signin">
    		<div class="sign-header">
    			<button class="login-btn select-active"> 登陆 </button>
    			<button class="regist-btn"> 注册 </button>
    			<i style="float: right;display: block;margin-top: 10px;margin-right: 10px;" class="fa fa-close" data-dismiss="modal" aria-hidden="true"></i>
    			<i class="line"></i>
    		</div>

    	<div class="sign-content" style="margin: 20px 10px;">
    		  <div class="form-group">
   					<input name="usercount" autocomplete="off" type="text" class="form-control" id="sign_count" placeholder="请输入手机号/邮箱">
  			</div>
  			<div class="form-group">
   					<input name="password" autocomplete="off" type="password" class="form-control" id="sign_pwd" placeholder="请输入密码">
  			</div>
    		<div class="form-group" >
    				<input name="verifycode" id="VerifyText" style="width: 70%;display: inline-block;height: 40px;" type="text" class="form-control" placeholder="请输入验证码">	
    				<img id="registVerify" style="height: 100%;width: 28%;" src="<?php echo U('Request/getVerify');?>">
    				<script type="text/javascript">
    					$("#registVerify").click(function() {
    						$(this).attr("src",$(this).attr("src"));	 
    					});
    				</script>
  			</div>
  			<button id="signin-btn" type="button" class="btn btn-success" style="margin-left: auto; margin-right: auto; width: 100%;" >登陆</button>
  			<p id="sign-remind" style="color: red;padding-top: 5px;"></p>
    	</div>	

    	</div>

    </div><!-- /.modal-dialog -->
</div>


<div class="modal" id="lyrics-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   
       	<div class="lyrics">
       		<div style="position: relative;height: 100%;width: 100%;">
       				<div class="refresh"> <i class=" fa fa-spinner fa-pulse fa-4x"></i></div>  
       				<p > </p>			
       		</div>	
    	</div>
</div>




<main id="app">
<div class="headerv1">
	<div class="headerv1-nav">
		<a href="<?php echo U('Index/index');?>" class="nav index action">首页</a>
		<div class="nav has-list">
			<a href="javascript:;">发现</a>
			<ul class="nav-list">
				<li><a href="#/aa">频道</a></li>
				<li><a href="#/aa">名人</a></li>
				<li><a href="#/aa">朋友圈</a></li>
				<li><a href="#/aa">专辑</a></li>
			</ul>
		</div>
		<a href="#/" class="nav">动态</a>
		<a href="#/" class="nav">下载</a>
	</div>

	<div class="nav-logo">
		<img src="/blog/echo/v1.0/Public/img/2c35330d407d3f6edb9d09a4ce563da9-1.png">
	 </div>
 	<div class="headerv1-user">	
 		<a  href="#" class="user-login"><?php  echo session("uinfo")["email"]?"":"登录"; ?></a>
 		<img style="display: none;" class="signin-head-icon" src="">
 		<ul class="sign-list-view">
 			<li><a href="<?php echo U('User/edit');?>">个人信息</a></li>
 			<li><a href="<?php echo U('User/mycollect');?>">我的收藏</a></li>
 			<li id="sign-user-logout"><a href="javascript:;">退出登录</a></li>
 		</ul>
 		
 		
 	</div>
 	<div class="headerv1-upload">
 		<a href="#" class="upload-btn">上传歌曲</a>
 	</div>
 	<div class="headerv1-search">
 		<input class="search-input" type="text" name="search" placeholder="搜索内容">
 	</div>
</div>

	<div class="main-center">
		<div class="user-left-menu">

		<div class="user-left-head">	
			<div class="user-head-image" >
				<img src="/blog/echo/v1.0/Public/img/Fsl8JQV5Y59_Cat6DgxgamCNEoO-.png">
			</div>
			<p class="user-head-name"><?php echo ($userInfo["name"]); ?></p>

			<span class="user-head-day">
				<i class="fa fa-mars"></i>
				<span class="user-head-costell"><?php echo ($userInfo["constell"]); ?></span>	
			</span>
			<span class="user-head-address">
				<i class="fa fa-location-arrow"></i>
				<span class="user-head-costell"><?php echo ($userInfo["city"]); ?></span>	
			</span>
			<p>&nbsp</p>
		</div>

		<ul class="menu-list">
			<li><a href="/blog/echo/v1.0/Index/User/index">我的动态</a></li>
			<li><a href="/blog/echo/v1.0/Index/User/edit">个人信息</a></li>
			<li><a href="/blog/echo/v1.0/Index/User/mycollect">我的收藏</a></li>
		</ul>
	</div>

	<div class="user-left-edit">
		
		<h3>个人资料</h3>
		<hr>
		<form style="margin-bottom: 100px;" class="user-left-forms" role="form" action="edit" enctype="multipart/form-data" method="POST">
			
			<div class="form-group">
				<label>头像上传</label>
				<div class="add-files">
					<input class="form-image-upload" style="z-index: 10"  type="file" name="file">
					<i class="fa fa-upload fa-2x"></i>
					<span  class="file-docu"></span>
					<img class="form-image-show"  src="">
				</div>
				<p style="color:#6ed56c;font-size: 12px;margin-top: 5px; ">上传文件格式仅限：jpg,png</p>

			</div>

			<div class="form-group">
				<label>用户名</label>
				<input style="width: 40%;" class="form-control" type="text" name="userName">
			</div>

			<div class="form-group">
				<label>性别</label>
				 &nbsp;&nbsp;&nbsp;<input value="1" type="radio" name="sex">&nbsp;男
				 &nbsp;&nbsp;&nbsp;&nbsp;<input value="2" type="radio" name="sex">&nbsp;女
			</div>

			<div class="form-group">
				<label>城市</label>
				<input style="width: 40%;" class="form-control" type="text" name="city">
			</div>

			<div class="form-group">
				<label>星座</label>
				<select name="constell" class="constell-select" style="width: 30%;outline: none;">
					<option disabled selected = "selected">请选择</option>
					<option v-for="item in constell">{{item}}</option>
				</select>
			</div>

			<div class="form-group">
				<label>个人简介</label>
				<textarea style="display: block;height: 100px;width: 40%;outline: none;resize: none;"  name="userInstro"></textarea>
			</div>

			<div class="form-group">
				<input id="form-submit"  class="btn btn-success" type="button" name="submitIn" value=" 提交 ">
			</div>
			
		</form>
	</div>
   
 </div>
</main>

<script type="text/javascript">
	
	$(".menu-list li").each(function() {
		var index = <?php echo ($selectIndex); ?>;
		if (index == $(this).index()) {
			$(this).addClass("icon-current");
		}
	});
	if ("<?php echo ($userInfo["head_pic"]); ?>") {
		var newUrl = "/blog/echo/v1.0/Public/"+"<?php echo ($userInfo["head_pic"]); ?>";
		$(".user-head-image img").attr("src",newUrl);
	}

	

	var constell = ["白羊座","金牛座","双子座","巨蟹座","狮子座","处女座","天秤座","天蝎座","射手座","摩羯座","水瓶座","双鱼座"];
	var vm = new Vue({
		el: "#app",
		data:{
			constell:constell,
		}
	})
	var uerInfo = <?php echo ($userInfo); ?>;
	if (uerInfo) {
		if ("<?php echo ($userInfo["name"]); ?>") {
			$("input[name='userName']").val("<?php echo ($userInfo["name"]); ?>");
		}
		if ("<?php echo ($userInfo["sex"]); ?>") {
			var sex = "<?php echo ($userInfo["sex"]); ?>";
			$(":radio[name='sex'][value='" + sex + "']").prop("checked", "checked");
		}
		if ("<?php echo ($userInfo["constell"]); ?>") {
		  var con = constell.indexOf("<?php echo ($userInfo["constell"]); ?>"); 
		  $(".constell-select").get(0).selectedIndex = con+1;
		}
		if ("<?php echo ($userInfo["city"]); ?>") {
		  	$("input[name='city']").val("<?php echo ($userInfo["city"]); ?>");
		}
		if ("<?php echo ($userInfo["introduction"]); ?>") {
		  	$("textarea[name='userInstro']").val("<?php echo ($userInfo["introduction"]); ?>");
		}
		if ("<?php echo ($userInfo["head_pic"]); ?>") {
			var newUrl = "/blog/echo/v1.0/Public/"+"<?php echo ($userInfo["head_pic"]); ?>";
			$(".form-image-show").css("display","block");
		  	$(".form-image-show").attr("src",newUrl);
		}

	}

	$("#form-submit").click(function(){

		$(".user-left-forms").submit();

	})

	$(".form-image-upload").change(function(e) {
			var fileName = this.value.toLowerCase().split('.').splice(-1);
			if (fileName == "png" || fileName == "jpg") {
				$(".file-docu").text($(this).val());
				$(".form-image-show").css("display","block");
				var fr = new FileReader();
				var imgObj = this.files[0];
				fr.readAsDataURL(imgObj);
				
				fr.onload = function(e) {
					var newUrl = this.result;
					$(".form-image-show").attr("src",newUrl);
				}
			}else {
				$(".form-image-show").css("display","none");
				$(this).val("");
				$('.file-docu').text("文件格式不对");
				setTimeout("$('.file-docu').text('');",2000);
			}			
	});


</script>



<script src="/blog/echo/v1.0/Public/js/main.js" type="text/javascript"></script>

</body>
</html>